<template>
  <el-select
    style="width: 100%"
    v-model="userId"
    placeholder="请输入学生用户"
    clearable
    filterable
    remote
    :remote-method="queryUserList"
    :loading="loading"
    @change="handleChange"
  >
    <el-option
      v-for="user in clientUsers"
      :key="user.userId"
      :label="user.username"
      :value="user.userId"
    >
    </el-option>
  </el-select>
</template>

<script>
import { listUser } from '@/api/client/user';

export default {
  data() {
    return {
      loading: false,
      userId: null,
      clientUsers: [],
    };
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value);
    },
    queryUserList(query) {
      if (query != '' && query.length > 3) {
        this.loading = true;
        setTimeout(() => {
          listUser({
            username: query,
          }).then((response) => {
            this.clientUsers = response.rows || [];
            this.loading = false;
          });
        }, 500);
      } else {
        this.clientUsers = [];
      }
    },
  },
};
</script>
